/*
  学习目标：子传父技术- 与vue类似
  💥 父组件，传一个函数给子组件
  💥 子组件：调用父组件传来的函数,传回数据即可
  1. 父组件定义函数，通过 props 传递给子组件
  2. 子组件 通过 props 接收, 并且在子组件上调用即可，会传回 参数
  3. 父组件接收到参数后，通过 this.setState 修改数据即可

*/
import React from 'react';

export default class App extends React.Component {
  state = {
    money: 10000,
  };
  handleMakeMoney = () => {
    // 快捷键this.setState({})  ---- sst
    this.setState({ money: this.state.money + 1000 });
  };

  handleCost = (num) => {
    // console.log('我是父组件的handleCost -----> ', num);
    this.setState({ money: this.state.money - num });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleMakeMoney}>爸爸开始赚钱了</button>
        <Child money={this.state.money} handleCost={this.handleCost}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    // 在render中，通过 this.props 接收
    // console.log('this.props -----> ', this.props);
    // 快捷键生成 --- cp
    const { money, handleCost } = this.props;
    return (
      <div>
        <h1>爸爸给我钱了 - {money}</h1>
        {/* 3. 子组件：调用父组件传来的函数 */}
        <button onClick={() => handleCost(1000)}>我要花掉爸爸的钱-1000</button>
      </div>
    );
  }
}
